<!--
 * @Author: xjt
 * @Date: 2021-04-30 10:24:59
 * @LastEditTime: 2021-04-30 11:14:11
 * @Description: file content
 * @LastEditors: xjt
-->
<template>
  <ocrImport type="xiushanhetongshu" :steps="steps" @scanCompleted="handleScanCompleted">
    <!-- 表单项 -->
    <div class="basic-from">
      <el-form ref="form" :rules="rules" :model="operationContract" class="form-wrap">
        <el-form-item label="工程名称" class="listFormItem" prop="engineeringName">
          <el-button class="add" type="primary" size="mini" @click="$refs.propertyChoose.show();">选择</el-button>
          <el-input v-halfCharCode v-model="operationContract.engineeringName" placeholder="请选择工程名称" readonly />
        </el-form-item>
        <el-form-item label="单位名称" prop="unitName">
          <el-input v-halfCharCode v-model="operationContract.unitName" readonly placeholder="请输入单位名称" />
        </el-form-item>
        <el-form-item label="物业名称" prop="propertyName">
          <el-input v-halfCharCode v-model="operationContract.propertyName" readonly placeholder="请输入物业名称" />
        </el-form-item>
        <el-form-item label="合同名称" class="breakItem" prop="contractName">
          <el-input v-halfCharCode v-model.trim="operationContract.contractName" maxlength="20" placeholder="请输入合同名称" />
        </el-form-item>
        <el-form-item label="合同编号" prop="contractNumber">
          <el-input v-halfCharCode v-model.trim="operationContract.contractNumber" disabled maxlength="30" placeholder="请输入合同编号" />
        </el-form-item>
        <el-form-item label="签订日期" prop="signTime">
          <el-date-picker v-model="operationContract.signTime" format="yyyy-MM-dd" placeholder="请输入签订日期" value-format="yyyy-MM-dd" />
        </el-form-item>

        <el-form-item label="合同金额" prop="totalAmount">
          <el-input
            v-halfCharCode
            v-model="operationContract.totalAmount"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            maxlength="15"
            placeholder="请输入合同金额"
          />
        </el-form-item>
        <el-form-item label="工期" prop="constructionPeriod">
          <el-input v-halfCharCode v-model.number="operationContract.constructionPeriod" maxlength="5" placeholder="请输入工期">
            <i slot="suffix">日历日</i>
          </el-input>
        </el-form-item>
        <el-form-item label="保修期" prop="warrantyPeriod">
          <el-input
            v-halfCharCode
            v-model.number="operationContract.warrantyPeriod"
            maxlength="3"
            oninput="value=value.replace(/[^\d]/g,'')"
            placeholder="请输入保修期"
          >
            <i slot="suffix">月</i>
          </el-input>
        </el-form-item>
        <el-form-item label="保证金" prop="margin">
          <el-input v-model="operationContract.margin" v-only-number="{min:0,precision:2}" maxlength="20" placeholder="请输入保证金">
            <i slot="suffix">元</i>
          </el-input>
        </el-form-item>
        <el-form-item label="付款方式" class="full" prop="payMethod">
          <el-input v-halfCharCode v-model="operationContract.payMethod" type="textarea"  placeholder="请输入付款方式" />
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remarks">
          <el-input v-halfCharCode v-model="operationContract.remarks" type="textarea" maxlength="200" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="服务价目列表" class="full" prop="operateContractDetailList">
          <el-button size="mini" type="primary" style="float: right" @click="addDetailList">添加</el-button>
          <el-table :data="operateContractDetailList" class="full">
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="unitPrice" label="单价(元/m²)" width="180">
              <template slot-scope="scope">
                <el-input
                  v-halfCharCode
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  maxlength="12"
                  v-model="scope.row.unitPrice"
                  placeholder="单价(元/m²)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="costItems" label="费用项目">
              <template slot-scope="scope">
                <el-input v-halfCharCode v-model="scope.row.costItems" maxlength="50" placeholder="项目名称" />
              </template>
            </el-table-column>
            <el-table-column prop="paymentAmount" label="付款金额(元)">
              <template slot-scope="scope">
                <el-input
                  v-halfCharCode
                  v-model="scope.row.paymentAmount"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  maxlength="15"
                  placeholder="付款金额(元)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="discountAmount" label="折扣金额(元)">
              <template slot-scope="scope">
                <el-input
                  v-halfCharCode
                  v-model="scope.row.discountAmount"
                  oninput="value=value.replace(/[^0-9.]/g,'')"
                  maxlength="15"
                  placeholder="折扣金额(元)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="finallyAmount" label="最终金额(元)">
              <template slot-scope="scope">
                <span>{{getTotalCount(scope.$index, scope.row.paymentAmount, scope.row.discountAmount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="releteDetailList(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <!-- 工程选择弹窗 -->
      <propertyChooseDialog ref="propertyChoose" dialogType="contract" @changeProperty="handlePropertyChange" />
    </div>
  </ocrImport>
</template>

<script>
import ocrImport from '@/components/ocr-import'
import contractMixins from '@/views/wy-operate/views/repair/contract/add'
import { getPropertyList } from '@/views/wy-operate/api/repair'
export default {
  mixins: [contractMixins],
  components: {
    ocrImport
  },
  computed: {
    steps () {
      return [
        { title: "选择模板" },
        { title: "合同信息填写", validate: this.save },
      ]
    }
  },
  methods: {
    // ocr扫描完成
    handleScanCompleted ({ data }) {
			//alert(JSON.stringify(data))
    	this.operationContract={...this.operationContract,...data};



    	//工程名称那些是要去查的，而不是直接文字
			let requestData = { engineeringName: data.engineeringName }
			getPropertyList(requestData, "contract", "repair").then(res => {
				const {current, size, total, records, pages} = res.data.data
				if (total == 1) {
					let data2=records[0];
					this.operationContract = {
						...this.operationContract,
						...data2,
						totalAmount: data2.approvalAmount,
						contractName: data2.engineeringName + "施工工程"
					};

				} else if(total>1){
					this.$alert("根据识别的工程名称找到多个工程，无法自动填充表单");
				}
				else{
					this.$alert("工程名称未找到，请手工选择已有的工程名称");
				}
			});
      //console.log(data)
    },
    // ocr识别字段格式化
    formatter (data) {
      return data
    }
  },
}
</script>

<style lang="scss" scoped>
.resource-manage {
  padding: 24px 24px 0;
}
</style>
